<template>
	<div class="feedback-container">
		<div class="feedback-header">
			<h1 class="feedback-title">留言反馈</h1>
			<p class="feedback-subtitle">我们重视您的每一条意见，感谢您的反馈</p>
		</div>

		<div class="feedback-form">
			<!-- 商店名称输入 -->
			<uni-easyinput v-model="userName" placeholder="请输入需要反馈的商店" clearable class="name-field" />

			<!-- 邮箱输入（带格式验证） -->
			<uni-easyinput v-model="userEmail" placeholder="请输入您的邮箱（选填）" clearable type="email" class="email-field"
				@input="checkEmail" />
			<view class="error-message" v-if="emailError">{{ emailError }}</view>

			<!-- 反馈内容输入 -->
			<uni-easyinput v-model="feedbackContent" placeholder="请输入您的反馈内容..." type="textarea" :rows="4" autosize
				clearable class="content-field" />

			<!-- 反馈类型标签选择 -->
			<div class="feedback-tags">
				<span class="tag-label">反馈类型：</span>
				<view class="tag-group">
					<view v-for="tag in feedbackTags" :key="tag"
						:class="['tag-item', tagTypeMap[tag], { 'tag-active': selectedTag === tag }]"
						@click="selectTag(tag)">
						{{ tag }}
					</view>
				</view>
			</div>

			<!-- 提交按钮 -->
			<button class="submit-button" @click="submitFeedback">
				提交反馈
			</button>
		</div>

		<div class="feedback-list">
			<h2 class="list-title">最新反馈</h2>

			<!-- 搜索框 -->
			<uni-easyinput v-model="searchKeyword" placeholder="搜索反馈内容" clearable class="search-field" />

			<!-- 反馈列表 -->
			<view v-if="filteredFeedbackList.length > 0" class="feedback-items">
				<view v-for="(feedback, index) in filteredFeedbackList" :key="feedback.id" class="feedback-item"
					:class="{ 'item-even': index % 2 === 0 }">
					<view class="item-header">
						<span class="item-name">{{ feedback.name }}</span>
						<span class="item-time">{{ formatTime(feedback.time) }}</span>
						<view :class="['tag-item', 'tag-small', tagTypeMap[feedback.type || '其他']]">
							{{ feedback.type || '其他' }}
							<uni-icon v-if="isOwnFeedback(feedback)" type="trash" size="12"
								@click="deleteFeedback(feedback.id)" class="delete-icon" />
						</view>
					</view>
					<view class="item-content">{{ feedback.content }}</view>
				</view>
			</view>

			<!-- 空列表提示 -->
			<view v-else class="empty-list">
				<p>暂无反馈内容，欢迎您第一个留言！</p>
			</view>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',
				userEmail: '',
				feedbackContent: '',
				selectedTag: '',
				emailError: '',
				searchKeyword: '',
				feedbackTags: ['食品建议', '相关问题', '服务评价', '其他'],
				// 映射原生样式类名（替代vant的type）
				tagTypeMap: {
					'食品建议': 'tag-warning',
					'相关问题': 'tag-danger',
					'服务评价': 'tag-success',
					'其他': 'tag-default'
				},
				feedbackList: []
			}
		},
		methods: {
			// 选择反馈类型
			selectTag(tag) {
				this.selectedTag = tag;
				this.checkEmail();
			},
			// 提交反馈
			submitFeedback() {
				// 表单验证
				if (!this.userName.trim()) {
					uni.showToast({
						title: '请输入需要反馈的商店',
						icon: 'none'
					});
					return;
				}
				if (!this.feedbackContent.trim()) {
					uni.showToast({
						title: '请输入反馈内容',
						icon: 'none'
					});
					return;
				}
				if (!this.selectedTag) {
					uni.showToast({
						title: '请选择反馈类型',
						icon: 'none'
					});
					return;
				}
				if (this.userEmail && !this.validateEmail(this.userEmail)) {
					uni.showToast({
						title: '请输入正确的邮箱格式',
						icon: 'none'
					});
					return;
				}

				// 创建反馈对象
				const newFeedback = {
					id: Date.now(),
					name: this.userName,
					email: this.userEmail,
					content: this.feedbackContent,
					type: this.selectedTag,
					time: new Date()
				};

				// 添加到列表（头部插入）
				this.feedbackList.unshift(newFeedback);
				uni.showToast({
					title: '反馈提交成功'
				});

				// 重置表单
				this.userName = '';
				this.userEmail = '';
				this.feedbackContent = '';
				this.selectedTag = '';
				this.emailError = '';
			},
			// 邮箱格式验证
			validateEmail(email) {
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				return emailRegex.test(email);
			},
			// 实时验证邮箱
			checkEmail() {
				if (this.userEmail && !this.validateEmail(this.userEmail)) {
					this.emailError = '请输入正确的邮箱格式';
				} else {
					this.emailError = '';
				}
			},
			// 格式化时间
			formatTime(date) {
				const d = new Date(date);
				const year = d.getFullYear();
				const month = (d.getMonth() + 1).toString().padStart(2, '0');
				const day = d.getDate().toString().padStart(2, '0');
				const hour = d.getHours().toString().padStart(2, '0');
				const minute = d.getMinutes().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},
			// 判断是否为当前用户的反馈（按商店名称匹配）
			isOwnFeedback(feedback) {
				return feedback.name === this.userName;
			},
			// 删除反馈
			deleteFeedback(id) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这条反馈吗？',
					success: (res) => {
						if (res.confirm) {
							this.feedbackList = this.feedbackList.filter(item => item.id !== id);
							uni.showToast({
								title: '删除成功'
							});
						}
					}
				});
			}
		},
		watch: {
			userEmail() {
				this.checkEmail();
			}
		},
		computed: {
			// 搜索过滤反馈列表
			filteredFeedbackList() {
				if (!this.searchKeyword) return this.feedbackList;
				const keyword = this.searchKeyword.toLowerCase();
				return this.feedbackList.filter(item =>
					item.name.toLowerCase().includes(keyword) ||
					item.content.toLowerCase().includes(keyword)
				);
			}
		}
	}
</script>

<style scoped>
	/* 全局容器样式 */
	.feedback-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 30px 20px;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}

	/* 头部样式 */
	.feedback-header {
		text-align: center;
		margin-bottom: 30px;
	}

	.feedback-title {
		font-size: 28px;
		color: #333;
		margin-bottom: 10px;
		font-weight: 600;
	}

	.feedback-subtitle {
		font-size: 16px;
		color: #666;
		margin: 0;
	}

	/* 表单样式 */
	.feedback-form {
		background-color: #fff;
		border-radius: 10px;
		padding: 25px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		margin-bottom: 30px;
	}

	.name-field,
	.email-field {
		margin-bottom: 20px;
	}

	.content-field {
		margin-bottom: 20px;
	}

	.error-message {
		font-size: 14px;
		color: #f56c6c;
		margin-top: -15px;
		margin-bottom: 15px;
		line-height: 1;
	}

	/* 标签选择样式 */
	.feedback-tags {
		margin-bottom: 25px;
	}

	.tag-label {
		display: block;
		margin-bottom: 10px;
		color: #666;
		font-size: 16px;
	}

	.tag-group {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.tag-item {
		padding: 6px 16px;
		border-radius: 20px;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.tag-small {
		padding: 3px 10px;
		font-size: 12px;
	}

	.tag-default {
		background-color: #f5f5f5;
		color: #666;
	}

	.tag-warning {
		background-color: #fff7e6;
		color: #e6a23c;
	}

	.tag-danger {
		background-color: #fff2f0;
		color: #f56c6c;
	}

	.tag-success {
		background-color: #f0f9eb;
		color: #67c23a;
	}

	.tag-active {
		background-color: #409EFF !important;
		color: #fff !important;
	}

	/* 提交按钮样式 */
	.submit-button {
		width: 100%;
		height: 48px;
		line-height: 48px;
		background-color: #409EFF;
		color: #fff;
		border-radius: 24px;
		font-size: 16px;
		border: none;
	}

	.submit-button:active {
		background-color: #3086d6;
	}

	/* 反馈列表样式 */
	.feedback-list {
		background-color: #fff;
		border-radius: 10px;
		padding: 25px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.list-title {
		font-size: 22px;
		color: #333;
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
	}

	.search-field {
		margin-bottom: 20px;
	}

	/* 反馈项样式 */
	.feedback-items {
		margin-top: 10px;
	}

	.feedback-item {
		padding: 20px;
		margin-bottom: 15px;
		border-radius: 8px;
		background-color: #f9f9f9;
		transition: all 0.3s ease;
	}

	.feedback-item:hover {
		background-color: #f0f5ff;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
	}

	.item-even {
		background-color: #f5f7fa;
	}

	.item-even:hover {
		background-color: #e6edf7;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		flex-wrap: wrap;
		gap: 8px;
	}

	.item-name {
		font-weight: 500;
		color: #333;
		font-size: 16px;
	}

	.item-time {
		color: #999;
		font-size: 14px;
	}

	.item-content {
		color: #666;
		font-size: 16px;
		line-height: 1.6;
	}

	/* 空列表样式 */
	.empty-list {
		text-align: center;
		padding: 30px 0;
		color: #999;
		font-size: 16px;
	}

	/* 删除图标样式 */
	.delete-icon {
		margin-left: 5px;
		cursor: pointer;
		color: #999;
	}

	.delete-icon:hover {
		color: #f56c6c;
	}

	/* 响应式适配 */
	@media (max-width: 640px) {
		.feedback-container {
			padding: 20px 15px;
		}

		.feedback-title {
			font-size: 24px;
		}

		.submit-button {
			height: 44px;
			line-height: 44px;
			font-size: 14px;
		}

		.feedback-item {
			padding: 15px;
			margin-bottom: 10px;
		}
	}
</style>